<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <el-descriptions
          title="社区详情"
          :column="2"
          :labelStyle="labelStyle"
          border
        >
          <el-descriptions-item label="乡镇">{{
                                           exData.remouldTownName
                                           }}
          </el-descriptions-item>
          <el-descriptions-item label="社区">{{
                                           exData.orgName
                                           }}
          </el-descriptions-item>
          <el-descriptions-item label="计划开始时间">{{
                                               info.startTime
                                               }}
          </el-descriptions-item>
          <el-descriptions-item label="计划结束时间">{{
                                               info.endTime
                                               }}
          </el-descriptions-item>
          <el-descriptions-item label="改造牵头人">{{
                                              info.lerderUserName
                                              }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">{{
                                             info.lerderUserMobile
                                             }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">{{
                                           exData.status | keyText("BARRIER_FREE_STATUS")
                                           }}
          </el-descriptions-item>
          <el-descriptions-item label="可下发数量">
            {{exData.taskCount}}
          </el-descriptions-item>
        </el-descriptions>
        <div class="opt">
          <el-button @click="back">
            返回
          </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <el-descriptions title="无障碍改造人员列表"></el-descriptions>
        <div v-if="records.length !== 0">
          <template v-for="item in records">
            <div :key="item.id" style="margin-bottom:20px">
              <el-descriptions :labelStyle="labelStyle" :column="2" border>
                <el-descriptions-item
                  label="姓名"
                  :contentStyle="{ width: '150px' }"
                >
                  {{ item.name }}
                </el-descriptions-item>
                <el-descriptions-item label="联系方式">
                  {{ item.linkmanPhone }}
                </el-descriptions-item>
                <el-descriptions-item label="改造地址">
                  {{ item.address }}
                </el-descriptions-item>
              </el-descriptions>
              <div class="desAfter">
                <span style="cursor: pointer" @click="view(item.id)">
                  查看详情
                </span>
              </div>
            </div>
          </template>
          <div style="text-align:center">
            <el-pagination
              style="display:inline"
              background
              layout="total, prev, pager, next"
              :page-size="5"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-card>
    </el-col>
    <el-dialog
      title="改造人员详情"
      :visible.sync="personVisible"
      width="40%"
      top="15vh"
    >
      <el-descriptions :labelStyle="labelStyle" :column="2" border>
        <el-descriptions-item label="姓名" :span="2">
          {{ personInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ personInfo.linkman }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ personInfo.linkmanPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="改造地址" :span="2">
          {{ personInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item label="经度">
          {{ personInfo.lng }}
        </el-descriptions-item>
        <el-descriptions-item label="纬度">
          {{ personInfo.lat }}
        </el-descriptions-item>
        <el-descriptions-item label="状态" :span="2">
          {{ personInfo.status | keyText("BARRIER_FREE_STATUS") }}
        </el-descriptions-item>
        <el-descriptions-item label="附件" :span="2" v-if="personInfo.file">
          <div style="display: inline-block">
            <div
              v-for="(item, index) in JSON.parse(personInfo.file)"
              :key="index"
              style="margin-bottom: 4px"
            >
              <a class="article_title_a" @click="previewDetail(item.id)">
                <i class="el-icon-files mr5" />{{ item.fileName }}
              </a>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  name: "villagesDetail_1",
  props: {
    obj: [Object, Boolean]
  },
  activated() {
    // 获取任务信息
    this.API.getRemouldById({ id: this.obj.remouldId }).then(res => {
      this.info = res.data;
      this.getList();
    });
  },
  computed: {
    exData() {
      return this.obj
    }
  },
  data() {
    return {
      labelStyle: {
        width: "120px",
        textAlign: "center"
      },
      total: 1,
      pageIndex: 1,
      info: {},
      personInfo: {},
      records: [],
      dialogVisible: false,
      personVisible: false
    };
  },
  methods: {
    previewDetail(val) {
      this.openTabPage(
        window.api.preFile +
        "?url=" +
        window.api.secretFilePreview +
        val +
        "?token=" +
        window.sessionStorage.getItem("token")
      );
    },
    // 查看详情
    getList() {
      console.log(this.obj, 666)
      console.log(this.exData, 666)
      this.API.getVillagePersonPageList({
        remouldId: this.exData.remouldId,
        villageId: this.exData.id,
        pageIndex: this.pageIndex,
        pageSize: 5
      }).then(res => {
        this.total = res.data.total;
        this.records = res.data.records;
      });
    },
    // 返回
    back() {
      this.$parent.show("villagesDetail", false);
    },
    // 查看详情
    view(id) {
      this.personVisible = true;
      this.API.getRemouldVillagePersonById({ id }).then(res => {
        this.personInfo = res.data;
      });
    },
    // 分页回调
    handleCurrentChange(val) {
      this.pageIndex = val;
    }
  }
};
</script>

<style scoped>
  .upload >>> .el-upload,
  .upload >>> .el-upload-dragger {
    width: 100%;
  }

  .bm-view >>> .ui_city_change {
    margin-top: 32px !important;
  }

  .opt {
    margin: 20px;
    display: flex;
    justify-content: center;
  }

  .desAfter {
    border: 1px solid #ebeef5;
    border-top: none;
    padding: 12px 10px;
    font-size: 14px;
    color: #409eff;
    text-align: center;
  }

  .bm-view {
    width: 100%;
    height: 543px;
  }
</style>
